 <!doctype html>
<html ng-app="backButtonDemo">
<head>
    <meta charset="utf-8">
    <title>ngDialog demo</title>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="../../css/ngDialog.css">
    <link rel="stylesheet" href="../../css/ngDialog-theme-default.css">
    <link rel="stylesheet" href="../../css/ngDialog-theme-plain.css">
    <link rel="stylesheet" href="../../css/ngDialog-custom-width.css">

    <style>
        a, button {
            font: 14px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
            display: block;
            color: #333;
            margin-bottom: 10px;
        }

        /* The following 'important' styles are just here to show off trapFocus */
        button.ngdialog-button {
            border: solid transparent 1px !important;
        }

        button.ngdialog-button:focus {
            border: solid black 1px !important;
        }

        .ngdialog h2:focus { outline: none; }
    </style>
</head>
<body>

	<ui-view />

    <!-- Templates -->

    <script type="text/ng-template" id="home.html">
		<h1> Home Page </h1>
		<h1> Navigate to the about page </h1>
		<button ui-sref="about"> ABOUT PAGE </button>
    </script>

    <script type="text/ng-template" id="about.html">
    	<h1> About Page </h1>
    	<p> {{ text }} </p>
    	<button ui-sref="home"> HOME PAGE </button>
    </script>

    <script type="text/ng-template" id="resolveDialog">
    	Sup?
    	<div class="ngdialog-buttons">
        	<button class="ngdialog-button ngdialog-button-primary" ng-click="confirm()"> Continue </button>
        	<button class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog()"> Go Back </button>
        </div>
    </script>

    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script>window.angular || document.write('<script src="../../bower_components/angular/angular.min.js">\x3C/script>')</script>
    <script src="../../js/ngDialog.js"></script>

    <!-- App -->
    <script>
    	angular.module('backButtonDemo', ['ngDialog', 'ui.router'])

    	.config(function($urlMatcherFactoryProvider, $stateProvider){
    		$urlMatcherFactoryProvider.strictMode(false);
    		$stateProvider.state('home', 
    			{ 
    				url: '', 
    				templateUrl: 'home.html' 
    		})
    		.state('about', 
    			{ 
    				url: '/about', 
    				templateUrl: 'about.html', 
    				controller: 'mainController', 
    				resolve:  {
    					'RESOLVE_DATA' : function($q) {
    						var defer = $q.defer();
    						setTimeout(function() {
    							defer.resolve('the data for this page resolves after 1ms');
    						}, 1);
  							return defer.promise;
    					}
    				}
    		});
    	})

    	.run(function($rootScope) {
    		$rootScope.$on('$locationChangeSuccess', function(){
    			console.log('$locationChangeSuccess event fired');
    		});
    		$rootScope.$on('$stateChangeSuccess', function(){
    			console.log('$stateChangeSuccess event fired');
    		});
    	})

    	.controller('mainController', function($scope, RESOLVE_DATA, ngDialog, $state){
    		$scope.text = RESOLVE_DATA;

	        ngDialog.openConfirm({
	            template: 'resolveDialog',
	            className: 'ngdialog-theme-default',
	            scope: $scope,
	            closeByDocument: false,
	            closeByEscape: false,
	            showClose: false,
	            closeByNavigation: true
	        }).then(function(value) {
	            return value;
	        }, function(reason) {
	            $state.go('home');
	            return reason;
	        });
    	});
    </script>
</body>
</html>